﻿<Row Align="RowAlign.Middle" Gutter="8">
    <Col Span="5">
    ButtonActive:
    <Switch @bind-Value="_buttonActive"></Switch>
    </Col>
    <Col Span="9">
    ButtonSize:
    <RadioGroup @bind-Value="_buttonSize">
        <Radio Value="SkeletonElementSize.Default">Default</Radio>
        <Radio Value="SkeletonElementSize.Large">Large</Radio>
        <Radio Value="SkeletonElementSize.Small">Small</Radio>
    </RadioGroup>
    </Col>
    <Col Span="9">
    ButtonShape:
    <RadioGroup @bind-Value="_buttonShape">
        <Radio Value="SkeletonElementShape.Default">Default</Radio>
        <Radio Value="SkeletonElementShape.Circle">Circle</Radio>
        <Radio Value="SkeletonElementShape.Round">Round</Radio>
    </RadioGroup>
    </Col>
</Row>
<br />
<SkeletonElement Type="SkeletonElementType.Button" Active="_buttonActive" Size="_buttonSize" Shape="_buttonShape"></SkeletonElement>
<br />
<br />
<Row Align="RowAlign.Middle" Gutter="8">
    <Col Span="5">
    AvatarActive:
    <Switch @bind-Value="_avatarActive"></Switch>
    </Col>
    <Col Span="9">
    AvatarSize:
    <RadioGroup @bind-Value="_avatarSize">
        <Radio Value="SkeletonElementSize.Default">Default</Radio>
        <Radio Value="SkeletonElementSize.Large">Large</Radio>
        <Radio Value="SkeletonElementSize.Small">Small</Radio>
    </RadioGroup>
    </Col>
    <Col Span="9">
    AvatarShape:
    <RadioGroup @bind-Value="_avatarShape">
        <Radio Value="AvatarShape.Circle">Circle</Radio>
        <Radio Value="AvatarShape.Square">Square</Radio>
    </RadioGroup>
    </Col>
</Row>
<br />
<SkeletonElement Type="SkeletonElementType.Avatar" Active="_avatarActive" Size="_avatarSize" Shape="_avatarShape"></SkeletonElement>
<br />
<br />
<Row Align="RowAlign.Middle" Gutter="8">
    <Col Span="5">
    InputActive:
    <Switch @bind-Value="_inputActive"></Switch>
    </Col>
    <Col Span="9">
    InputSize:
    <RadioGroup @bind-Value="_inputSize">
        <Radio Value="SkeletonElementSize.Default">Default</Radio>
        <Radio Value="SkeletonElementSize.Large">Large</Radio>
        <Radio Value="SkeletonElementSize.Small">Small</Radio>
    </RadioGroup>
    </Col>
</Row>
<br />
<SkeletonElement Type="SkeletonElementType.Input" Active="_inputActive" Size="_inputSize" style="width:300px"></SkeletonElement>

@code{
    bool _buttonActive = false;
    bool _avatarActive = false;
    bool _inputActive = false;
    SkeletonElementSize _buttonSize = SkeletonElementSize.Default;
    SkeletonElementSize _avatarSize = SkeletonElementSize.Default;
    SkeletonElementSize _inputSize = SkeletonElementSize.Default;
    SkeletonElementShape _buttonShape = SkeletonElementShape.Default;
    SkeletonElementShape _avatarShape = SkeletonElementShape.Circle;
}